<template>
    <div class="tmpl">
        <!--{{this.$route.params.id}}-->
        <!--1.0标题-->
        <div class="title">
            <h2>{{imgdata.title}}</h2>
            <p class="otitle">
                {{imgdata.add_time | fmtdate('YYYY-MM-DD')}}
                {{imgdata.click}}次浏览
                分类:***
            </p>
        </div>

        <!--2.0使用MUI的九宫格，实现图片网格-->
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li v-for="(item,index) in imglist" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <!--<img width="109" height="109" src="../../../statics/images/bg.jpg" alt="">-->
                <img class="preview-img" :src="item.src" height="100" @click="$preview.open(index,imglist)">
            </li>
        </ul>

        <!--3.0展示图片的详细描述-->
        <div class="content" v-html="imgdata.content"> </div>

        <!--4.0评论组件 -->
        <subComment3 :artid="imgid"></subComment3>

    </div>
</template>
<style scoped>
    .tmpl .title{
        padding: 15px 15px 0 15px;
        width:100%;
        text-align: center;
        border-bottom: 2px solid rgba(92,92,92,0.2);
    }
    .title h2{
        color: #0094ff;
        font-size: 16px;
    }
    .title .otitle{
        font-size: 12px;
        color: #rgba(92,92,92,0.6);
    }
    /*复写9宫格样式*/
    .mui-grid-view.mui-grid-9{
        background-color: #fff;
    }
    .mui-grid-view.mui-grid-9 .mui-table-view-cell{
        border-bottom: none;
        border-right: none;
        padding:5px;
    }
    .mui-grid-view.mui-grid-9 .mui-table-view-cell > a:not(.mui-btn){
        padding:0;
    }
    /*图片描述样式*/
    .content{
        padding:5px;
        color: #5c5c5c;
    }
</style>
<script>
    import common from '../../kits/common.js';
    //导入评论组件
    import subComment3 from '../subcomp/subComment.vue';

    export default{
        data(){
            return{
                imgdata:{},  //代表这张图片数据的详细描述信息
                imglist:[],   //9宫格缩略图，存储数组
                imgid:0  //用于评论组件的图片id
            }
        },
        created(){
            this.getimgdata();  //根据图片id获取到图片的详细数据对象
            this.getthumbimgs(); //获取9宫格中的图片
            //将图片id初始化
            this.imgid = this.$route.params.id;
        },
        components:{
            //注册评论组件成为私有组件
            subComment3
        },
        methods:{
            getimgdata(){
                //1.0获取图片的id
                let id = this.$route.params.id;
                //2.0发出ajax请求获取数据
                let url = common.apihost + '/api/getimageInfo/' + id;
                this.$http.get(url).then(
                    res=>{
                        this.imgdata = res.body.message[0];
                    },
                    res=>{
                        console.log('获取图片详细数据失败')
                    }
                );
            },
            getthumbimgs(){
                //1.0获取图片的id
                let id = this.$route.params.id;
                let url = common.apihost + '/api/getthumimages/' + id;
                let imghost = common.imghost;  //这是图片云服务器的域名
                this.$http.get(url).then(
                    res=>{
                        //2.0 res.body.message中返回的是一个数组[{src:'/upload/...'}]
                        res.body.message.forEach(item=>{
                            item.src = imghost + item.src;
                            //由于服务器服务器没有返回高和宽，而vue-preview组件需要W和H所以要动态添加
                            item.h = 400;
                            item.w = 600;
                        });
                        //3.0将res.body.message赋值给imglist
                        this.imglist = res.body.message;
                    },
                    tes=>{
                        console.log('获取图片缩略图列表出错');
                    });
            }
        }
    }
</script>